<template>
  <div>
    <a-card title="本周变更风险统计" :bordered="false" :headStyle="{ padding: '0 15px', border:0, marginTop: '15px' }" style="width:100%">
      <radius-chart id="riskStatistics" :opiton="optionRiskStatistics" style="width:100%; height:160px"></radius-chart>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
import RadiusChart from './radiusChart'
export default {
  name: 'RiskStatistics',
  components: {
    RadiusChart
  },
  data () {
    return {
      optionRiskStatistics: {
          backgroundColor: '#ffffff',
          title: {
            text: '变更风险统计',
            subtext: '',
            textStyle: {
              fontSize: 15,
              color: '#999',
              lineHeight: 35
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center',
            left: '45%',
            top: '30%'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {d}%'
          },
          legend: {
            itemGap: 20,
            bottom: 10,
            left: 'center',
            itemWidth: 30,
            itemHeight: 14,
            selectedMode: true,
            data: [
                { value: '44.65', name: '高' },
                { value: '25.83', name: '中' },
                { value: '2.21', name: '低' }
            ],
            textStyle: {
              fontSize: '14px',
              color: 'rgba(127, 161, 253, 1)'
            }
          },
          color: [ '#f9728a', '#fdb984', '#2cd3ae' ],
          series: [
            {
              name: '风险统计',
              type: 'pie',
              radius: [40, 60],
              center: ['45%', '40%'],
              label: {
                show: false
              },
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 12
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: '44.65', name: '高' },
                { value: '25.83', name: '中' },
                { value: '2.21', name: '低' }
              ]
            },
            {
              type: 'pie',
              hoverAnimation: false,
              radius: [65, 75],
              center: ['45%', '40%'],
              tooltip: {
                  show: false
              },
              itemStyle: {
                borderRadius: 20,
                borderColor: '#fff',
                borderWidth: 6
              },
              label: {
                  show: false,
                  position: 'center'
              },
              emphasis: {
                  label: {
                      show: false,
                      formatter: '{num|{d}} \n {name|{b}}',
                      rich: {
                          num: {
                              align: 'center',
                              fontSize: '30',
                              fontWeight: 'bold'
                          },
                          name: {
                              color: '#000000',
                              fontSize: '20'
                          }
                      }
                  }
              },
              data: [
                { value: '44.65', name: '高' },
                { value: '25.83', name: '中' },
                { value: '2.21', name: '低' }
              ]
          }
        ]
      }
    }
  },
  created () {
    this.getRiskStatisticsData()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 本周变更风险统计
     */
    getRiskStatisticsData () {
      // 随机对象
      const riskData = []
      riskData.push({ value: Math.floor(Math.random() * 10), name: '高' }, { value: Math.floor(Math.random() * 10), name: '中' }, { value: Math.floor(Math.random() * 10), name: '低' })
      this.optionRiskStatistics.legend.data = riskData
      this.optionRiskStatistics.series[0].data = riskData
      this.optionRiskStatistics.series[1].data = riskData
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
